<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <div>{{ result }}</div>
    </div>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    msg:"值"
                }
            },
            computed: {
                result() {
                    let phoneReg = /^(?:(?:\+|00)86)?1\d{10}$/;
                    let emailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                    let cardReg = /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/;
                    // '字符串|手机号|邮箱|身份证'
                    if(phoneReg.test(this.msg)){
                        return "手机号"
                    }else if(emailReg.test(this.msg)){
                        return "邮箱"
                    }else if(cardReg.test(this.msg)){
                        return "身份证"
                    }else{
                        return "字符串"
                    }
                }
            },
        }).mount("#app")
    </script>
</body>
</html>